<template>
    <el-card header="添加问卷" shadow="never" :body-style="{ padding: '0px' }">
        <el-form :model="form" ref="form" label-width="40px">
            <el-form-item label="标题">
                <el-input v-model="form.title" placeholder="请输入标题"></el-input>
            </el-form-item>

            <el-form-item label="班级">
                <el-select v-model="form.class_id" placeholder="请选择班级">
                    <el-option v-for="cls in classes" :key="'cls_'+cls.id" :label="cls.class_name+'班'" :value="cls.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!--选项-->
            <el-form-item label="选项">
                <el-select v-model="form.item" placeholder="请选择班级">
                    <el-option v-for="item in items" :key="'item_'+item.id" :label="item.item_name" :value="JSON.stringify(item.children)">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="大纲">
                <el-tree @check-change="checkChange" :render-after-expand="false" :show-checkbox="true" :data="outlines" :props="{label:'outline_name'}"></el-tree>
                <el-form-item>
                    <el-button type="primary" @click="add">添加</el-button>
                </el-form-item>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    title: '',
                    class_id: '',
                    item: '',
                    content: [],
                },
                classes: [],
                items: [],
                outlines: [],
            }
        },
        created() {
            this.getClasses();
            this.getItems();
            this.getOutlines();
        },
        methods: {
            add() {
                this.axios.post('/papers/add', {
                    title: this.form.title,
                    class_id: this.form.class_id,
                    item: this.form.item,
                    content: JSON.stringify(this.form.content),
                }).then(() => {
                    this.$router.push({
                        name: 'papers'
                    })
                }).catch(() => {
                     this.$message.error('注意!!! 标题, 班级, 选项, 大纲 均不可以为空!!!');
                })
            },
            checkChange(node, flag) {
                if (node.children.length == 0) {
                    if (flag) {
                        this.form.content.push(node);
                    } else {
                        let i = this.form.content.indexOf(node);
                        this.form.content.splice(i, 1);
                    }
                }
            },
            getOutlines() {
                this.axios.get('/outlines').then((ret) => {
                    this.outlines = ret.data.data;
                })
            },
            //选项
            getItems() {
                this.axios.get('/items').then((ret) => {
                    this.items = ret.data.data;
                })
            },
            //班级
            getClasses() {
                this.axios.get('/classes', {
                    params: {
                        currentPage: 1,
                        pageSize: 9999
                    }
                }).then((ret) => {
                    this.classes = ret.data.data.rows;
                })
            }
        }
    }
</script>

<style>

</style>
